import React from 'react';
import ReactDom from 'react-dom';
import { changeNav } from '../../../actions';
import { wsTimeSelect} from '../../../actions/smartDr.js'
import { connect } from 'react-redux';
import { Button, List, WhiteSpace, DatePicker, Toast } from 'antd-mobile';
import { ajaxPost } from 'wxAjaxUtil';
import moment from 'moment';
// import CSSModules from 'react-css-modules';
import hhistory from '../../../history';
import styles from './wsConfigTime.less';
const Item = List.Item;

let time = moment('00:00', 'HH:mm').utcOffset(8);
let endTime = moment('23:59', 'HH:mm').utcOffset(8);
let minTime = moment('00:00', 'HH:mm').utcOffset(8);
// @CSSModules(styles, { allowMultiple: true })
let weeks = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'];
let storeInfo = null;
class WsConfigTime extends React.Component {
    constructor(props) {
        super(props);
    }
    state = {
        selectWeek: [],
        startTime: time,
        endTime: endTime,
        minTime: minTime
    }

    componentWillMount() {
       /*  var {location} = this.props;
        if(location.state.time && location.state.time.length){
            var _timeStr = '';
            var _selectWeek = [];
            location.state.time.forEach((t, i)=>{
                if(t){
                    _timeStr = t;
                    _selectWeek.push(i);
                }               
            })

            var _timeStrArr = _timeStr.split('-');
            var _startTime = moment(_timeStrArr[0], 'HH:mm').utcOffset(8);
            var _endTime = moment(_timeStrArr[1], 'HH:mm').utcOffset(8);
            this.setState({startTime: _startTime, endTime: _endTime, selectWeek: _selectWeek});
            console.log(location.state.time)
        } */
    }
    componentDidMount() {
        this.props.tochangeNav({
            title: "外送时间段设置", rbtn: [
                <Button key="1" type="primary" inline onClick={() => this.saveDate()} size="small">确定</Button>
            ]
        });

    }
    saveDate() {
        var { startTime, endTime,  selectWeek} = this.state;
        if(!selectWeek.length || !startTime || !endTime){
            Toast.fail('请选择配送时间或者日期', 2);
            return;
        }
        var _startTime = moment(startTime).format('HH:mm');
        var _endTime = moment(endTime).format('HH:mm');
        var dateArr = [];
        var tempStr = '';
        weeks.forEach((w, i)=>{
            if(selectWeek.indexOf(i) > -1){
                tempStr = _startTime+ '-' + _endTime;
                dateArr.push(_startTime+ '-' + _endTime);
            }else{
                dateArr.push("");
            }
        });

        console.log(dateArr);
        if(tempStr){
            dateArr[dateArr.length] = tempStr;
        }
        this.props.timeSelect(dateArr);
        var backRouter = this.props.location.state.backRouter;
        hhistory.push({pathname: backRouter});

    }


    toggleWeek(i) {
        var { selectWeek } = this.state;
        var index = selectWeek.indexOf(i);
        if (index > -1) {
            selectWeek.splice(index, 1);
        } else {
            selectWeek.push(i);
        }
        this.setState({ selectWeek: selectWeek });
    }
    timeChange(date, num) {
        // var selectTime = moment(date);
        // console.log(selectTime.format('HH:mm'))
        // var minutes = 

        if (num == 1) {
            var startTime = moment(date).add(1, 'm');
            this.setState({ [num == 1 ? 'startTime' : 'endTime']: date, 'minTime': startTime, endTime: startTime });
        } else {
            this.setState({ [num == 1 ? 'startTime' : 'endTime']: date });
        }

    }
    render() {
        return (
            <div>
                <WhiteSpace size="lg" />
                <List
                    className="date-picker-list"
                    style={{ backgroundColor: 'white' }}
                >
                    <DatePicker
                        mode="time"
                        title="选择开始时间"
                        extra="开始时间"
                        value={this.state.startTime}
                        onChange={(date) => this.timeChange(date, 1)}
                    >
                        <List.Item arrow="horizontal" ><span className={styles.titleSize}>开始时间</span></List.Item>
                    </DatePicker>

                    <DatePicker
                        mode="time"
                        title="选择结束时间"
                        extra="结束时间"
                        value={this.state.endTime}
                        onChange={(date) => this.timeChange(date, 2)}
                        minDate={this.state.minTime}
                    >
                        <List.Item arrow="horizontal"><span className={styles.titleSize}>结束时间</span></List.Item>
                    </DatePicker>
                </List>
                <WhiteSpace size="lg" />
                <List renderHeader="选择适用星期">
                    <List.Item multipleLine>
                        <div className={styles.weekBtnWrap}>
                            {
                                weeks.map((text, i) => (
                                    <div key={i} className={this.state.selectWeek.indexOf(i) > -1 ? styles.weekActiveBtn : styles.weekBtn} onClick={() => this.toggleWeek(i)}>{text}</div>
                                ))
                            }
                        </div>
                    </List.Item>
                </List>
            </div>)

    }

}

const mapStateToProps = (state) => ({

})
const mapDispatchToProps = (dispatch) => ({
    tochangeNav: navogj => dispatch(changeNav(navogj)),
    timeSelect: date => dispatch(wsTimeSelect(date))
})

export default connect(mapStateToProps, mapDispatchToProps)(WsConfigTime)